<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>06-九九乘法表</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			span{
				display: inline-block;
				width:50px;
				height:20px;
				margin:5px;
				/* border:1px solid red; */
				text-align: center;
				line-height: 20px;
			}
			#box{
				width:100px;
			}
			#box .public{
				overflow: hidden;
				width: 100px;
				height:30px;
				transition: all .3s linear;
			}
			#box .public>div{
				width: 100%;
				height: 30px;
				background-color: yellow;
			
			}
			#box .public>div:nth-child(2):hover{
				background-color: pink;
				transition: all .3s linear;
			}
			#box .public>div:nth-child(3):hover{
				background-color: pink;
				transition: all .3s linear;
			}
			#box .public>div:nth-child(4):hover{
				background-color: pink;
				transition: all .3s linear;
			}
			#box .public .zf{
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<audio src="fumu.mp3" autoplay="autoplay" controls="controls" loop="loop">
		</audio>
        <div id="box">
			<div id="box_one" class="public">
				<div class="zf">关羽</div>
				<div>姓名</div>
				<div>年龄</div>
				<div>性别</div>
			</div>
			<div id="box_twe" class="public">
				<div class="zf">张飞</div>
				<div>姓名</div>
				<div>年龄</div>
				<div>性别</div>
			</div>
			<div id="box_three" class="public">
				<div class="zf">马超</div>
				<div>姓名</div>
				<div>年龄</div>
				<div>性别</div>
			</div>
			<div id="box_four" class="public">
				<div class="zf">黄忠</div>
				<div>姓名</div>
				<div>年龄</div>
				<div>性别</div>
			</div>
			<div id="box_five" class="public">
				<div class="zf">赵云</div>
				<div>姓名</div>
				<div>年龄</div>
				<div>性别</div>
			</div>
		</div>
		<script type="text/javascript">
			var domBoxOne = document.getElementById("box_one");
			var domBoxTwe = document.getElementById("box_twe");
			var domBoxThree = document.getElementById("box_three");
			var domBoxFour = document.getElementById("box_four");
			var domBoxFive = document.getElementById("box_five");
			var bool = true;
			domBoxOne.onclick = function(){
				if(bool){
					domBoxOne.style.height="120px";
					bool=false;
				}else{
					domBoxOne.style.height="30px";
					bool=true;
				}
				
			}
			domBoxTwe.onclick = function(){
				if(bool){
					domBoxTwe.style.height="120px";
					bool=false;
				}else{
					domBoxTwe.style.height="30px";
					bool=true;
				}
				
			}
			domBoxThree.onclick = function(){
				if(bool){
					domBoxThree.style.height="120px";
					bool=false;
				}else{
					domBoxThree.style.height="30px";
					bool=true;
				}
				
			}
			domBoxFour.onclick = function(){
				if(bool){
					domBoxFour.style.height="120px";
					bool=false;
				}else{
					domBoxFour.style.height="30px";
					bool=true;
				}
				
			}
			domBoxFive.onclick = function(){
				if(bool){
					domBoxFive.style.height="120px";
					bool=false;
				}else{
					domBoxFive.style.height="30px";
					bool=true;
				}
				
			}
			//1	
			for(var i =1; i<10;i++){
                for(var j=1;j<=i;j++){
                    document.write("<span>"+i+"*"+j+"="+i*j+"</span>");
                }
				document.write("<br>");
            }
			document.write("<br>");
			//2
			for(var i =9; i>0;i--){
                for(var j=1;j<=i;j++){
                    document.write("<span>"+i+"*"+j+"="+i*j+"</span>");
                }
				document.write("<br>");
            }
			document.write("<br>");
			for(var i =1; i<10;i++){
                for(var j=1;j<=i;j++){
                    document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
                }
				document.write("<br>");
            }
			document.write("<br>");
			for(var i =9; i>0;i--){
                for(var j=1;j<=i;j++){
                    document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
                }
				document.write("<br>");
            }
			//3
			document.write("<br>");
			for(var i =1; i<10;i++){
                for(var j=i;j<9;j++){
                    document.write("<span>"+"</span>");	
                }
                for(var k=1;k<=i;k++){
					document.write("<span>"+i+"*"+k+"="+i*k+"</span>");	
                }
				document.write("<br>");
            }
			document.write("<br>");
			for(var i =1; i<10;i++){
                for(var j=2;j<=i;j++){
                    document.write("<span>"+" "+"</span>");	
                }
                for(var k=9;k>=i;k--){
					document.write("<span>"+i+"*"+k+"="+i*k+"</span>");	
                }
				document.write("<br>");
            }
			document.write("<br>");
			for(var i =1; i<10;i++){
                for(var j=i;j<9;j++){
                    document.write("<span>"+"</span>");	
                }
                for(var k=1;k<=i;k++){
					document.write("<span>"+k+"*"+i+"="+i*k+"</span>");	
                }
				document.write("<br>");
            }
			document.write("<br>");
			for(var i =1; i<10;i++){
                for(var j=2;j<=i;j++){
                    document.write("<span>"+" "+"</span>");	
                }
                for(var k=9;k>=i;k--){
					document.write("<span>"+k+"*"+i+"="+i*k+"</span>");	
                }
				document.write("<br>");
            }
		</script>	
	
		
	</body>
</html>
